import { fetcher } from '@/src/utils/fetcher'
import { getTranslations } from 'next-intl/server'
import { cookies } from 'next/headers'
import { Link } from '@/src/navigation'

interface PageProps {
  params: {
    slug: string
  }
}

const Page: React.FC<PageProps> = async (props) => {
  const { params } = props
  const cookieStore = cookies()

  const [t, caseItem] = await Promise.all([
    getTranslations('cases'),
    fetcher<Case>(`/api/index/caseInfo?caseid=${params.slug}`, {
      cookieStore,
    }),
  ])

  return (
    <>
      <div className='h-[1.5625rem] lg:h-[2.5rem] 2xl:h-[3.75rem]' />
      <h2 className='text-[#333333] text-center text-[1rem] leading-[1.4rem] font-bold 2xl:text-[1.21875rem] 2xl:leading-[0.9375rem]'>
        {caseItem.title || 'Unknown'}
      </h2>
      <div className='h-6 2xl:h-9' />
      <div dangerouslySetInnerHTML={{ __html: caseItem.details! }}></div>
      <div className='h-[1px] bg-[#E5E5E5] my-6 lg:my-5 2xl:my-[1.875rem]' />
      {caseItem.s_list?.id && (
        <Link
          href={`/news-detail/${caseItem.s_list?.id}`}
          className='flex text-[#333333] text-[0.875rem] leading-[1rem] font-medium lg:text-[0.75rem] lg:leading-[1rem] 2xl:text-[0.84375rem] 2xl:leading-[1rem]'
        >
          <div>{t('pre')}：</div>
          <div>{caseItem.s_list?.title || 'Unknown'}</div>
        </Link>
      )}
      <div className='h-3'></div>
      {caseItem.x_list?.id && (
        <Link
          href={`/news-detail/${caseItem.x_list?.id}`}
          className='flex text-[#333333] text-[0.875rem] leading-[1rem] font-medium lg:text-[0.75rem] lg:leading-[1rem] 2xl:text-[0.84375rem] 2xl:leading-[1rem]'
        >
          <div>{t('next')}：</div>
          <div>{caseItem.x_list?.title || 'Unknown'}</div>
        </Link>
      )}
      <div className='h-10' />
    </>
  )
}

export default Page
